if (document.querySelector(".author-content.author-content-item.single")) {  // 如果页面存在 .author-content.author-content-item.single 元素
  const canvas = document.createElement("canvas");                           // 创建一个 canvas 元素
  canvas.id = "header_canvas";
  canvas.style.position = "absolute";
  canvas.style.bottom = "0";
  canvas.width = 844;
  canvas.height = 346;
  document.querySelector(".author-content.author-content-item.single").appendChild(canvas);  // 将canvas添加到该类名的元素中
  const parent = document.querySelector(".author-content.author-content-item.single").parentNode;  // 获取该元素的父元素节点
  parent.className = "thumbnail_canvas";                                            // 将父元素的类名修改为 thumbnail_canvas
  (function () {    // 定义一个匿名函数立即执行
    var canvas,     // 用于存储HTML <canvas> 元素的引用
      ctx,          // 用于存储画布的绘图上下文（context），通过这个上下文可以进行绘图操作。
      width,        // 用于存储画布的宽度
      height,       // 用于存储画布的高度
      bubbles,      // 用于存储泡泡对象的数组，这些对象将用于绘制气泡。
      animateHeader = true;    // 用于控制是否需要动画效果，默认为 true。
    initHeader();    // 调用下方的initHeader 函数

    /**
    * @author DavidLee 
    * @title initHeader
    * @date 2024-10-10
    * @description 初始化一个网页头部画布（canvas），并在画布上绘制一些气泡效果
    * @param  null
    * @return null
    */
    function initHeader() {
      canvas = document.getElementById("header_canvas");   // 获取上述id为header_canvas的canvas元素
      window_resize();
      if (canvas) {
        ctx = canvas.getContext("2d");       // 画布存在则获取画布的绘图上下文
        bubbles = [];                        // 建立泡泡，初始化气泡数组
        var num = width * 0.04;              // 气泡数量
        for (var i = 0; i < num; i++) {      // 创建气泡对象并添加到数组
          var c = new Bubble();
          bubbles.push(c);
        }
        animate();                           // 启动动画
      }
    }
    
    /**
    * @author DavidLee 
    * @title animate
    * @date 2024-10-10
    * @description 通过不断清除画布并重新绘制气泡来实现动画效果
    * @param  null
    * @return null
    */
    function animate() {
      if (animateHeader) {                    // 检查是否需要动画效果
        ctx.clearRect(0, 0, width, height);   // 清除画布上的内容
        for (var i in bubbles) {              // 对气泡对象调用draw方法进行绘制
          bubbles[i].draw();
        }
      }
      // requestAnimationFrame是浏览器提供的一个API，用于实现平滑的动画效果。
      requestAnimationFrame(animate);         // 使用requestAnimationFrame方法来循环调用animate函数，从而实现动画效果
    }

    /**
    * @author DavidLee 
    * @title window_resize
    * @date 2024-10-10
    * @description 调整一个HTML画布（canvas）的大小，使其适应浏览器窗口或某个特定的容器
    * @param  null
    * @return null
    */
    function window_resize() {
      //canvas铺满窗口
      //width = window.innerWidth;
      //height = window.innerHeight;

      //如果需要铺满内容可以换下面这个
      const panel = document.querySelector(".thumbnail_canvas");   // 获取thumbnail_canvas的画布元素
      if (panel) {     
        width = panel.offsetWidth;   // 如果存在该元素则获取容器的高度和宽度
        height = panel.offsetHeight;

        canvas.width = width;        // 然后赋值给canvas，从而调整canvas的大小以适应容器
        canvas.height = height;
      }
    }

    window.onresize = function () {   // 在浏览器窗口大小发生变化时，执行一个名为window_resize的函数
      window_resize();
    };

    /**
    * @author DavidLee 
    * @title Bubble
    * @date 2024-10-10
    * @description 创建气泡对象，使得对象具有随机的初始位置、透明度、大小和上升速度，并且能够绘制自身
    * @param  null
    * @return null
    */
    function Bubble() {
      var _this = this;
      (function () {
        _this.pos = {};
        init();    // 初始化气泡的位置、透明度、大小、透明度变化速度、大小变化速度和上升速度
      })();

      function init() {
        _this.pos.x = Math.random() * width;                  // 气泡初始位置
        _this.pos.y = height + Math.random() * 100;
        _this.alpha = 0.1 + Math.random() * 0.5;              // 气泡透明度
        _this.alpha_change = 0.0002 + Math.random() * 0.0005; // 气泡透明度变化速度
        _this.scale = 0.2 + Math.random() * 0.8;              // 气泡大小
        _this.scale_change = Math.random() * 0.002;           // 气泡大小变化速度
        _this.speed = 0.1 + Math.random() * 0.4;              // 气泡上升速度
      }

      //气泡
      this.draw = function () {
        if (_this.alpha <= 0) {   // 如果气泡的透明度小于等于0，则重新初始化气泡属性
          init();
        }
        _this.pos.y -= _this.speed;          // 每次调用draw时，气泡的位置会向上移动（y坐标减少）
        _this.alpha -= _this.alpha_change;   // 每次调用draw时，气泡的透明度会逐渐减少
        _this.scale += _this.scale_change;   // 每次调用draw时，气泡的大小会逐渐变化
        ctx.beginPath();                     // 开始绘制气泡路径
        ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false);   // 绘制一个圆形气泡
        ctx.fillStyle = "rgba(255,255,255," + _this.alpha + ")";                      // 设置气泡的填充颜色和透明度
        ctx.fill();                                                                   // 填充气泡
      };
    }
  })();
}
